<template>
    <div>
      <!-- 按钮用于触发文件选择 -->
      <button @click="triggerFileInput">选择文件</button>
      <!-- 隐藏的文件输入元素 -->
      <input
        type="file"
        ref="fileInput"
        style="display: none"
        @change="handleFileChange"
      />
  
      <!-- 显示选中的文件名 -->
      <p v-if="fileName">选中文件: {{ fileName }}</p>
  
      <!-- 上传按钮 -->
      <button @click="uploadFile">上传文件</button>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  import axios from 'axios'; // 引入axios用于文件上传
  
  // 定义响应式数据
  const fileInput = ref(null);
  const selectedFile = ref(null);
  const fileName = ref(null);
  
  // 触发文件输入
  const triggerFileInput = () => {
    fileInput.value.click();
  };
  
  // 处理文件选择
  const handleFileChange = (event) => {
    const file = event.target.files[0];
    if (file) {
      selectedFile.value = file;
      fileName.value = file.name;
    }
  };
  
  // 上传文件的方法
  const uploadFile = () => {
    if (!selectedFile.value) {
      alert('请先选择一个文件');
      return;
    }
  
    // 创建FormData对象
    const formData = new FormData();
    formData.append('file', selectedFile.value);
    
   // 假设你有一个函数来获取存储在本地存储、cookies或Vuex中的token
   function getAuthToken() {
     return localStorage.getItem('token');
   }
  
    // 使用axios发送POST请求
    axios.post('你的上传接口URL', formData, {
      headers: {
        'Content-Type': 'multipart/form-data',
         'Authorization': `Bearer ${getAuthToken()}` // 假设使用的是Bearer Token
      }
    })
    .then(response => {
      // 上传成功的处理
      console.log('文件上传成功', response);
      alert('文件上传成功');
    })
    .catch(error => {
      // 上传失败的处理
      console.error('文件上传失败', error);
      alert('文件上传失败');
    });
  };
  </script>
  
  <style>
  /* 样式根据需要添加 */
  </style>